<template>
  <div class="book-item-container">
    <div class="top">
      <span @click="handleGotoDetail">共{{ item.practCnt || 0 }}道习题</span>
      <el-dropdown style="margin-right: 30px;" placement="bottom" v-removeAriaHidden>
        <el-icon>
          <MoreFilled />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button link @click="handleUpdate">修改</el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button link @click="handleDel">删除</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="center">
      <div class="zhangjie">
        <el-tooltip :disabled="!(item.charpterName && item.charpterName.length > 10)" :content="item.charpterName"
          placement="top" effect="light">
          <div class="text-center">
            {{ item.charpterName }}
          </div>
        </el-tooltip>

      </div>
      <div class="kecheng">所属课程：{{ item.courseName }}</div>
    </div>
    <div class="bottom">
      <el-button type="primary" link @click="handleAddTest">增加习题</el-button>
      <el-button link @click="handleBeginTest">开始练习</el-button>
    </div>
  </div>
</template>

<script setup>
const emits = defineEmits(['add', 'test', 'update', 'del', 'detail'])
const props = defineProps({
  item: {
    type: Object,
    default: new Object()
  }
})

const handleGotoDetail = () => {
  emits('detail')
}
const handleAddTest = () => {
  emits('add')
}
const handleBeginTest = () => {
  emits('test')
}
const handleUpdate = () => {
  emits('update')
  console.log("🚀 ~ handleUpdate ~ handleUpdate:")
}
const handleDel = () => {
  emits('del')
  console.log("🚀 ~ handleDel ~ handleDel:")
}
</script>

<style lang='scss' scoped>
@import './index.scss'
</style>